<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <style type="text/css">
        .table {
            margin: 50px;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">
    <h1>题库列表</h1>

    <!--id="container"-->
    <el-button type="primary" @click="addSection=true">添加试题</el-button>
    <el-dialog title="添加试题" :visible.sync="addSection ">
        <el-form :model="notice">
            <el-form-item label="题目">
                <el-input style="width: 300px;" v-model="notice.selectName"></el-input>
            </el-form-item>
            <el-form-item label="选项A">
                <el-input style="width: 300px;" v-model="notice.selectA"></el-input>
            </el-form-item>
            <el-form-item label="选项B">
                <el-input style="width: 300px;" v-model="notice.selectB"></el-input>
            </el-form-item>
            <el-form-item label="选项C">
                <el-input style="width: 300px;" v-model="notice.selectC"></el-input>
            </el-form-item>
            <el-form-item label="选项D">
                <el-input style="width: 300px;" v-model="notice.selectD"></el-input>
            </el-form-item>
            <el-form-item label="分值">
                <el-input style="width: 300px;" v-model="notice.selectPoint"></el-input>
            </el-form-item>
            <el-form-item label="答案">
                <el-select v-model="notice.selectAnswer" placeholder="请选择">
                    <el-option label="A" value="A"></el-option>
                    <el-option label="B" value="B"></el-option>
                    <el-option label="C" value="C"></el-option>
                    <el-option label="D" value="D"></el-option>
                </el-select>
            </el-form-item>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    			<el-button @click="addSection  = false">取 消</el-button>
   				<el-button type="primary" @click="sectionAdd">确 定</el-button>
 			 </span>
    </el-dialog>
    <el-dialog title="修改试题" :visible.sync="updateWork ">
        <el-form :model="notice">
            <el-form-item label="题目">
                <el-input style="width: 300px;" v-model="notice.selectName"></el-input>
            </el-form-item>
            <el-form-item label="选项A">
                <el-input style="width: 300px;" v-model="notice.selectA"></el-input>
            </el-form-item>
            <el-form-item label="选项B">
                <el-input style="width: 300px;" v-model="notice.selectB"></el-input>
            </el-form-item>
            <el-form-item label="选项C">
                <el-input style="width: 300px;" v-model="notice.selectC"></el-input>
            </el-form-item>
            <el-form-item label="选项D">
                <el-input style="width: 300px;" v-model="notice.selectD"></el-input>
            </el-form-item>
            <el-form-item label="分值">
                <el-input style="width: 300px;" v-model="notice.selectPoint"></el-input>
            </el-form-item>
            <el-form-item label="答案">
                <el-select v-model="notice.selectAnswer" placeholder="请选择">
                    <el-option label="A" value="A"></el-option>
                    <el-option label="B" value="B"></el-option>
                    <el-option label="C" value="C"></el-option>
                    <el-option label="D" value="D"></el-option>
                </el-select>
            </el-form-item>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    			<el-button @click="updateWork  = false">取 消</el-button>
   				<el-button type="primary" @click="sectionUpdate1">确 定</el-button>
 			 </span>
    </el-dialog>

    <el-dialog title="试题详情" :visible.sync="detailsShow ">
        <el-form :model="notice">
            <el-form-item label="题目">
                <el-input style="width: 300px;" v-model="notice.selectName"></el-input>
            </el-form-item>
            <el-form-item label="选项A">
                <el-input style="width: 300px;" v-model="notice.selectA"></el-input>
            </el-form-item>
            <el-form-item label="选项B">
                <el-input style="width: 300px;" v-model="notice.selectB"></el-input>
            </el-form-item>
            <el-form-item label="选项C">
                <el-input style="width: 300px;" v-model="notice.selectC"></el-input>
            </el-form-item>
            <el-form-item label="选项D">
                <el-input style="width: 300px;" v-model="notice.selectD"></el-input>
            </el-form-item>
            <el-form-item label="分值">
                <el-input style="width: 300px;" v-model="notice.selectPoint"></el-input>
            </el-form-item>
            <el-form-item label="答案">
                <el-select v-model="notice.selectAnswer" placeholder="请选择">
                    <el-option label="A" value="A"></el-option>
                    <el-option label="B" value="B"></el-option>
                    <el-option label="C" value="C"></el-option>
                    <el-option label="D" value="D"></el-option>
                </el-select>
            </el-form-item>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    			<el-button @click="detailsExit">取 消</el-button>
 			 </span>
    </el-dialog>
    <div class="table">
        <el-table :data="tableData">
            <el-table-column prop="selectId" label="序号">
            </el-table-column>
            <el-table-column prop="selectName" label="题目">
            </el-table-column>
            <el-table-column prop="selectPoint" label="分值">
            </el-table-column>
            <el-table-column prop="selectAddtime" label="添加日期" :formatter="dateFormat">
            </el-table-column>
            <el-table-column label="操作" width="300px">
                <template slot-scope="scope">
                    <el-button type="primary" @click="getDetail(scope.row)">查看详情</el-button>
                    <el-button type="primary" @click="toUpdateSection(scope.row)">修改</el-button>
                    <el-button type="danger" @click="deleteWork(scope.row.selectId)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!--分页-->
    <div class="block">
        <el-pagination style="text-align: center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
    </div>


</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let _this = new Vue({
        el: '#app',
        data: {
            updateWork: false,
            addSection: false,
            detailsShow: false,
            pageIndex: 1,
            pageSize: 5,
            total: 0,
            tableData: [],
            notice: {
                selectId: null,
                selectName: null,
                selectA: null,
                selectB: null,
                selectC: null,
                selectD: null,
                selectPoint: null,
                selectAnswer: null,
                courseId: null
            },
        },
        created: function () {
            this.noticeList();
        },
        methods: {
            detailsExit:function(){
                _this.notice.selectId = null;
                _this.notice.selectName = null;
                _this.notice.selectA = null;
                _this.notice.selectB = null;
                _this.notice.selectC = null;
                _this.notice.selectD = null;
                _this.notice.selectPoint = null;
                _this.notice.selectAnswer = null;
                this.detailsShow=false;
            },
            sectionAdd: function () {
                this.notice.courseId='${courseId}';
                console.log(this.notice)
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/select/insert',
                    data: JSON.stringify(this.notice),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: res.message,
                                type: 'success'
                            });

                            _this.notice.selectId = null;
                            _this.notice.selectName = null;
                            _this.notice.selectA = null;
                            _this.notice.selectB = null;
                            _this.notice.selectC = null;
                            _this.notice.selectD = null;
                            _this.notice.selectPoint = null;
                            _this.notice.selectAnswer = null;
                            _this.addSection = false;
                            _this.noticeList();
                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'info'
                            })
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },
            toUpdateSection(notice) {

                $.ajax({
                    type: 'post',
                    url: '/api/teacher/select/selectByPrimaryKey',
                    data: {
                        selectId: notice.selectId
                    },
                    success: function (res) {
                        console.log(res)
                        _this.notice.selectId = res.resData.selectId;
                        _this.notice.selectName = res.resData.selectName;
                        _this.notice.selectA = res.resData.selectA;
                        _this.notice.selectB = res.resData.selectB;
                        _this.notice.selectC = res.resData.selectC;
                        _this.notice.selectD = res.resData.selectD;
                        _this.notice.selectPoint = res.resData.selectPoint;
                        _this.notice.selectAnswer = res.resData.selectAnswer;
                        _this.updateWork=true;
                    }
                })


            },
            sectionUpdate1() {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/select/update',
                    data: JSON.stringify(this.notice),
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            _this.notice.selectId = null;
                            _this.notice.selectName = null;
                            _this.notice.selectA = null;
                            _this.notice.selectB = null;
                            _this.notice.selectC = null;
                            _this.notice.selectD = null;
                            _this.notice.selectPoint = null;
                            _this.notice.selectAnswer = null;
                            _this.updateWork = false;
                            _this.noticeList();
                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'info'
                            })
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },
            deleteWork: function (id) {
                console.log(1111)
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    type: 'warning',
                    center: true
                }).then(function (value) {
                    $.ajax({
                        type: 'post',
                        url: '/api/teacher/select/delete',
                        data: {selectId: id},
                        dataType: 'json',
                        success: function (res) {
                            if (res.status == 200) {

                                _this.$message({
                                    message: res.message,
                                    type: 'success'
                                });
                                _this.noticeList();
                            } else {
                                _this.$message({
                                    message: res.message,
                                    type: 'info'
                                })
                            }
                            ;
                        },
                        error: function (error) {
                            console.log('接口不通' + error);
                        }
                    })
                }).catch(function () {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                })
            },
            /*日期格式化*/
            dateFormat: function (row, column) {
                let val = row[column.property];
                //console.log(date);
                let date = new Date(val);
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            },
            /*分页*/
            handleSizeChange: function (val) {
            }
            ,
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.noticeList();
            },
            noticeList: function () {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/select/list',
                    data: {
                        pageIndex: this.pageIndex,
                        courseId: '${courseId}'
                    },
                    success: function (res) {
                        console.log(res)
                        _this.tableData = res.resData.list;
                        _this.total = res.resData.total
                    }
                })
            }
            ,
            getDetail: function (notice) {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/select/selectByPrimaryKey',
                    data: {
                        selectId: notice.selectId
                    },
                    success: function (res) {
                        console.log(res)
                        _this.notice.selectId = res.resData.selectId;
                        _this.notice.selectName = res.resData.selectName;
                        _this.notice.selectA = res.resData.selectA;
                        _this.notice.selectB = res.resData.selectB;
                        _this.notice.selectC = res.resData.selectC;
                        _this.notice.selectD = res.resData.selectD;
                        _this.notice.selectPoint = res.resData.selectPoint;
                        _this.notice.selectAnswer = res.resData.selectAnswer;
                        _this.detailsShow=true;
                    }
                })


            }
        }
    })

</script>
</body>
</html>